/*** author: sailing date: 2018/10/23 ***/

<template>
	<div class="NavContent">
		<mu-container>
			<mu-bottom-nav :value="navSelect">
				<mu-bottom-nav-item
					:exact="true"
					value="/"
					title="早餐"
					to="/"
					icon="restore"
				></mu-bottom-nav-item>
				<mu-bottom-nav-item
					:exact="true"
					value="/motion"
					active-class="linkActiveClass"
					exact-active-class="exact-active"
					title="运动"
					to="/motion"
					icon="favorite"
				></mu-bottom-nav-item>
				<mu-bottom-nav-item
					:exact="true"
					value="/Life"
					active-class="linkActiveClass"
					exact-active-class="exact-active"
					title="便便"
					to="/Life"
					icon="location_on"
				></mu-bottom-nav-item>
				<mu-bottom-nav-item
					:exact="true"
					value="/Symptom"
					active-class="linkActiveClass"
					exact-active-class="exact-active"
					title="症状"
					to="/Symptom"
					icon="location_on"
				></mu-bottom-nav-item>
				
			</mu-bottom-nav>
		</mu-container>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		return {
			navSelect: this.$route.path
		};
	},
	mathods: {
		changerouter: () => {
			console.log("this.$router:");
		}
	},
	watch: {
		$route: function() {
			//console.log("----...---:", this.navSelect, this.$route.path)
		}
	}
};
</script>

<style lang="less">
.NavContent {
	position: fixed;
	bottom: 0px;
	background: #fff;
	border-top: 1px solid #ccc;
	width: 100%;
}
</style>
